<template>
	<view class="content">
		<view class="user_head" :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cover'}">
			<!-- <image class="baseTop" src="../../static/baseTop.png" mode="scaleToFill"></image> -->
			<uni-nav-bar left-icon="back" @clickLeft="gotoBack" :border="false" color="#fff" rightIcon="headphones" right-text="客服"  backgroundColor="transparent"></uni-nav-bar>
			<view class="userContent">
				<!-- <view class="topView">
					<uni-icons type="back" color="#fff" size="20"  @click="gotoBack"></uni-icons>
					<view class="kefu">
						<uni-icons type="headphones" color="#666666" size="20"></uni-icons>客服
					</view>
				</view> -->
				<view class="user-info">
						<!-- 头像 -->
						<image class="avater" :src='logo' mode="aspectFill"></image>
						<view class="nickName">{{schoolName}}</view>
				</view>
			</view>
		</view>
		<view class="goodItem">
			<view class="items" v-for="(item,index) in goods" :key='index'>
				<view class="contentGroud">
					<view v-if="item.type == '1'">
						<view class="labTopName">{{schoolBook}}</view>
						<view class="labTopName labType">{{item.title}}</view>
						<view class="itemTime">
						活动时间:{{item.beginTime}}-{{item.endTime}}
						</view>
					</view>
					<view v-else>
						<view class="labTopName">{{schoolZero}}</view>
						<view class="labTopName labType">校服零售</view>
					</view>
					<view class="itemSales" @click="gotoShopping(index)">{{i18n.buy}}</view>
				</view>
				<view class="goodImage">
					<image :src="item.pic | dominaImg" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="bottom">{{i18n.note }}{{className}}{{i18n.student}}</view>
		
		
		
	</view>
</template>

<script>
	
	const globalData = getApp().globalData
	import {listFm} from '../../api/index.js'
	import indexBackgroundImage from "@/static/baseTop.png"
	export default {
		data() {
			return {
				userId:undefined,
				schoolName:'',
				schoolId:'',
				indexBackgroundImage:indexBackgroundImage,
				className:'',
				schoolBook:'SCHOOL UNIFORMS\n TO \n BOOKING',
				schoolZero:'SCHOOL UNIFORMS\n TO \n RETAIL',
				logo:'../../static/default_market_tao.png',
				goods:[]
				}
		},
	   
		computed: {
		  i18n() {
		    return globalData.$t('companyDe')
		  }
		},
		onLoad() {
			this.userId = getApp().globalData.userId;
			this.listStus()
			
		},
		methods: {
			async listStus(){
				
				let {result} = await listFm({userId:this.userId});
			    this.goods = result.data;
				this.logo= result.logo;
				this.schoolName= result.schoolName;
				this.schoolId = result.schoolId
				this.className = result.gradeName +'/' + result.className

			},
			gotoBack(){
				uni.navigateBack({
					delta:1
				})
			},
			gotoShopping(index){
				
				let item = this.goods[index];
				
				if (item.type == '2') {
					uni.navigateTo({
						url:'../shopGood/shopGood?type=2&schoolId='+this.schoolId+'&schoolName='+encodeURIComponent(this.schoolName)
					})
				} else{
					
					uni.navigateTo({
						url:'../shopGood/shopGood?type=1&saleId='+item.saleId+'&schoolName='+encodeURIComponent(this.schoolName)
					})
					
				}
				
				
			}
		}
	}
</script>

<style lang="less">
	
	.user_head {
		width: 100%;
		height: 280upx;
		background-color: #333333;
		position: relative;
		padding-top:  var(--status-bar-height);
		position: relative;
		.baseTop{
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 330rpx;
		}
		.userContent{
			position: absolute;
			right: 0;
			bottom: 0;
			width: 750rpx;
			
		}
		.topView{
			
			
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			margin-top: calc(20rpx+ var(--status-bar-height));
			// padding-top: ;
			.kefu{
				.uni-icons{
					margin-right: 10rpx;
					position: relative;
					top: 10rpx;
				}
				font-size: 30rpx;
				color: #FFFFFF;
			}
			
		}
	    .baseImg{
			width: 100%;
			height: 220rpx;
		}
		.user-info {
			width: 750rpx;
			height: 220rpx;
			// position: absolute;
			// left: 0;
			// bottom: 0;
			// z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			
				.avater {
			
					width: 112upx;
					height: 112upx;
					border-radius: 50%;
	 
				}
	
				.nickName {
					// max-width: 230rpx;
					// height: 110upx;
					font-size: 36upx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					margin-top: 15rpx;
					// line-height: 110upx;
					
				}
			
		}
	
		
	}
	.goodItem{
		padding-bottom: 75rpx;
	}
	.items:last-child{
		margin-top: 40rpx;
		
	}
	.items{
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #EFF0F2;
		align-items: center;
		.contentGroud{
			width:300rpx;
			text-align: center;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content:center;
			align-items: center;
			.labTopName{
				font-size: 30rpx;
				white-space: pre-wrap;
				font-weight: 400;
				color: #333;
			}
			.labType{
				font-weight: 500;
			}
			.itemTime{
				// height: 60rpx;
				line-height: 30rpx;
				margin-top: 20rpx;
				font-size: 22rpx;
				display:flex ;
				flex-direction: column;
				align-items: center;
				color: #676767;
				font-weight: 400;
					
				image{
					
					width: 20rpx;
					height: 20rpx;
					margin-bottom: 20rpx;
				}
				
			}
			.totle{
				font-size: 32rpx;
				
			}
			.itemSales{
				background:linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);
				color: #FFFFFF;
				height: 48rpx;
				line-height: 48rpx;
				width: 130rpx;
				border-radius: 24rpx;
				margin-top: 20rpx;
				font-size: 22rpx;
				font-weight: 500;
				
			   
			}
		}
		.goodImage{
			width: 300rpx;
			height: 400rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
    .bottom{
		height: 70rpx;
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color:#EFF0F2;
		color: #666;
		padding-left: 20rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		font-weight: 400;
	}
</style>
